<template>
    <el-dialog v-model="compReportVisible" title="批次详情"  @opened="opened"  width="60%"  @close="closeTxDialog" >
        <div class="page-container" v-loading="pageLoading">
        <el-card >
            <template #header>
            <div class="card-header">
                <span>{{taskItem.no}}批次详情</span>
            </div>
            </template>
            <el-descriptions>
                <el-descriptions-item label="创建时间：">{{data?.addTime}}</el-descriptions-item>
                <el-descriptions-item label="企业名称：">{{data?.merName}}</el-descriptions-item>
                <el-descriptions-item label="企业编号：">{{data?.merNo}}</el-descriptions-item>
                <el-descriptions-item label="服务商名称：">{{data?.sydName}}</el-descriptions-item>
                <el-descriptions-item label="服务商编号：">{{data.sydNo}}</el-descriptions-item>
                <el-descriptions-item label="项总金额：">{{proxy?.convertFenToYuan(data?.amountEnt)}}</el-descriptions-item>
                <el-descriptions-item label="服务费："  >{{proxy?.convertFenToYuan(data?.serviceChargeAmount)}}</el-descriptions-item>
                <el-descriptions-item label="实际打款金额：">{{proxy?.convertFenToYuan(data?.money)}}</el-descriptions-item>
                <el-descriptions-item label="批次费率：">{{data?.serviceChargeRate+'%'}}</el-descriptions-item>
                <el-descriptions-item label="业务类型：">{{proxy?.getDicValue(data?.busType,wxfe_bus_type)}}</el-descriptions-item>
                <el-descriptions-item label="开票类型：">{{proxy?.getDicValue(data?.invoiceType,invoice_type)}}</el-descriptions-item>
                <el-descriptions-item label="产品编号：">{{data?.proNo}}</el-descriptions-item>
                <el-descriptions-item label="服务项目：">{{data?.proContent}}</el-descriptions-item>
                <el-descriptions-item label="计费模式：">{{proxy?.getDicValue(data?.chargeMode,charge_mode)}}</el-descriptions-item>
                <el-descriptions-item label="服务费承担方：">{{proxy?.getDicValue(data?.serviceChargeType,service_charge_type)}}</el-descriptions-item>
                <el-descriptions-item label="批次状态：">{{proxy?.getDicValue(data?.status,bill_status)}}</el-descriptions-item>
            </el-descriptions>
        </el-card>

        <el-card style="margin-top: 10px;">
            <template #header>
            <div class="card-header">
                <span>批次子明细</span>
            </div>
            </template>
            <el-table :data="detailList" border>
                <el-table-column prop="addTime" label="创建时间" width="180"></el-table-column>
                <el-table-column prop="billNo" label="批次号" width="180"> </el-table-column>
                <el-table-column prop="busNo" label="交易流水号" width="240"></el-table-column>
                <el-table-column prop="merName" label="企业名称" width="200"></el-table-column>
                <el-table-column prop="ywyChannelName" label="代理商名称" width="120">
                    <template #default="scope">
                        <span>{{ scope.row.ywyChannelName || ( scope.row.zjChannelName || (scope.row.fhzxChannelName || '--')) }}</span>
                     </template>
                </el-table-column>
                <el-table-column prop="sydName" label="服务商名称" width="200"></el-table-column>
                <el-table-column prop="workerName" label="客户名称" width="120"></el-table-column>
                <el-table-column prop="money" label="企业支付金额(元)" width="150">
                    <template #default="scope">
                        <span>{{ convertFenToYuan(scope.row.money) }}</span>
                     </template>
                </el-table-column>
                <el-table-column prop="amount" label="实得金额(元)" width="120">
                    <template #default="scope">
                        <span>{{ convertFenToYuan(scope.row.amount) }}</span>
                     </template>
                </el-table-column>
                <el-table-column prop="amount" label="服务费(元)" width="120">
                    <template #default="scope">
                        <span>{{ convertFenToYuan(scope.row.money-scope.row.amount) }}</span>
                     </template>
                </el-table-column>
                <el-table-column prop="money" label="税前金额(元)" width="120">
                    <template #default="scope">
                        <span>{{ convertFenToYuan(scope.row.money) }}</span>
                     </template>
                </el-table-column>
            </el-table>
            <pagination
                v-if="total > 0"
                v-model:total="total"
                v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize"
                @pagination="getList"
            />
        </el-card>


        </div>
    </el-dialog>
  </template>
  
  <script lang="ts" setup>
  import {billDetail,billSubDetail,billDetailByNo} from "@/api/settle/paybatch";
  const route = useRoute();  
  const { proxy } = getCurrentInstance() as ComponentInternalInstance;
  const pros = defineProps(['title','openCheck','id','item']);
  const emit = defineEmits(['dialogClose', 'dialogSubmit','flushDetail'])

  const compReportVisible= ref(false)
  const total = ref(0)
  const detailList = ref([]);


  compReportVisible.value = pros.openCheck;
  const closeTxDialog =()=>{
      compReportVisible.value = false;
      emit('dialogClose',{tag:1});
 }

  
  const pageLoading = ref(true);

 
  /**
   * TODO
   * 查询角色信息字典
   * 回显label
   * 角色信息字典名称未知
  */
  const list = toRefs<any>(proxy?.useDict("sys_role"));
  const {plat_role} =  toRefs<any>(proxy?.useDict("plat_role"));
  const { pay_status } = toRefs<any>(proxy?.useDict('pay_status'));
  const { invoice_status } = toRefs<any>(proxy?.useDict('invoice_status'));
  const { bill_status } = toRefs<any>(proxy?.useDict('bill_status'));
  const { pay_channel } = toRefs<any>(proxy?.useDict('pay_channel'));
  const { invoice_type } = toRefs<any>(proxy?.useDict('invoice_type'));
  const { wxfe_bus_type} = toRefs<any>(proxy?.useDict('wxfe_bus_type'));
  const {charge_mode} = toRefs<any>(proxy?.useDict('charge_mode'));
  const {settlement_style} = toRefs<any>(proxy?.useDict('settlement_style'));
  const {service_charge_type} = toRefs<any>(proxy?.useDict('service_charge_type'));

  const taskItem = ref({})
  const data = ref({})

  const queryParams = ref({
    pageNum:1,
    pageSize:10,
    id:null
  })

  taskItem.value = pros.item;
  
  
  
  //查询任务详情
  const getTaskDetail = ()=>{
    billDetailByNo(taskItem.value.no).then(res => {
        data.value = res.data;
    });
  }

  const getList = ()=>{
    billSubDetail({
      billNo:taskItem.value.no,
      ...queryParams.value
    }).then(res => {
      detailList.value = res.rows
      total.value = res.total
    })
  }



  const opened = ()=>{
        queryParams.value.pageNum = 1;
        queryParams.value.pageSize = 10;
        getTaskDetail();
        getList();
    }
    
    
  
    onMounted(() => {
        setTimeout(() => {
            pageLoading.value = false
        }, 500);
    })

  
    watch(() => pros.openCheck, async val => {
            compReportVisible.value =  val;
        }
    );

    watch(() => pros.item, async val => {
            taskItem.value = val;
    }
);

  </script>
  
  <style scoped lang="scss">
  .page-container {
    height: calc(100vh - 189px);
    overflow-y: auto;
  
    .footer {
      background: #fff;
      text-align: center;
      z-index: 999;
      margin-top: 20px;
    }
  }
  </style>
  